<script lang="ts" setup>
import { reactive, ref } from "vue";
import { ElButton, ElTag } from "element-plus";
import { ProTableScope, ProTableUltra } from "@/modules/package/table";

import ApiTicket from "@/api/ticket";
import { useRoute } from "vue-router";
import {} from "@element-plus/icons-vue";
import useRequest from "@/hooks/useRequest";
import ApiBase from "@/api/base";

const { query, params } = useRoute();

const tableColumns = [
  { label: "编号", prop: "id", width: 65 },
  { label: "赠票批次号", prop: "batch_num", width: 200 },
  { label: "票码编码", prop: "sn", width: 200 },
  { label: "门票标题", prop: "ticket_name", width: 160 },
  { label: "权益包名称", prop: "pkg_name", width: 160 },
  { label: "活动名称", prop: "act_name", width: 160 },
  // { label: "规格名称", prop: "sku_name", width: 160 },
  { label: "场次", prop: "etime_name", width: 160 },

  { label: "赠票数量", slot: "amount", minWidth: 100 },
  { label: "赠票时间", prop: "create_time", width: 170 },

  { label: "接收人", prop: "user_name", minWidth: 200 },
  { label: "领取时间", prop: "", width: 170 },
  { label: "状态", slot: "status", width: 170 },
  { label: "小程序码", slot: "img", width: 160 },
];

const refTable = ref();

const urlMap = reactive<Record<string, string>>({});

const { lastParams, data, run, onFetchResponse } = useRequest(
  ApiBase.generateQRCode,
  { immediate: false }
);

onFetchResponse(() => {
  urlMap[lastParams.value.scene] = data.value.url;
});

const generateQRCode = (row: any) => {
  run({
    page: "packageCoupon/pages/accept",
    path: "packageCoupon/pages/accept",
    // "develop" | "trial" ｜ "release"
    env_version: "release",
    scene: row.batch_num,
  });
};
</script>

<template>
  <ProTableUltra
    ref="refTable"
    align="right"
    footer-fixed
    :formCol="6"
    :columns="tableColumns"
    :fetch-url="ApiTicket.ticketSendDetailList"
    :fetch-options="{
      defaultSearch: { send_task_id: +params.id, act_id: +params.actId },
    }"
  >
    <ProTableScope>
      <template #amount>{{ query.amount }}</template>
      <template #status="{ row }">
        <ElTag type="warning" v-if="row.status == 4 && !row.user_id">未领取</ElTag>
        <ElTag type="success" v-else>已领取</ElTag>
      </template>
      <template #img="{ row }">
        <img
          class="w-120px"
          v-if="!!urlMap[row.batch_num]"
          :src="`data:image/jpeg;base64,${urlMap[row.batch_num]}`"
        />
        <ElButton v-else type="primary" @click="generateQRCode(row)"
          >获取小程序码
        </ElButton>
      </template>
    </ProTableScope>
  </ProTableUltra>
</template>
